<template>
  <div class="comment-wrapper">
    <div class="comment-wrapper-title">评论({{ totalNum }}条)</div>
    <div class="comment-wrapper-content">
      <infinite-scroll :loadable="canLoad" :infiniteEvent="loading">
        <div
          class="comment-wrapper-content-item"
          v-for="(item, index) in commentList"
          :key="index"
        >
          <div class="comment-wrapper-content-item-left">
            <img :src="item.user.avatarUrl" alt="" />
          </div>
          <div class="comment-wrapper-content-item-right">
            <div class="comment-right-top">
              <span>{{ item.user.nickname }}</span>
              <span>{{ formatTime(item.time) }}</span>
            </div>
            <div class="comment-right-text" v-html="item.content"></div>
          </div>
        </div>
      </infinite-scroll>
    </div>
  </div>
</template>

<script lang='ts'>
import { computed, defineComponent, reactive, toRefs, watch } from "vue";
import InfiniteScroll from "./infinitescroll.vue";
import { httpService } from "@/core/http";
import api from "@/api";
import dayjs from "dayjs";
import { Toast } from "vant";
export default defineComponent({
  name: "BaseComment",
  components: {
    InfiniteScroll,
  },
  props: {
    songId: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    const state = reactive({
      commentList: [],
      totalNum: 999999,
      pageNum: 0,
      pageSize: 10,
      canLoad: true,
    });
    // 根据歌曲id获取评论
    const getMusicComment = (id: number) => {
      if (!id) return;
      state.canLoad = false;
      const load = Toast.loading("加载评论中");
      httpService("GET", api.getComment + "/R_SO_4_" + id, {
        offset: state.pageNum,
        limit: state.pageSize,
      })
        .then((res: any) => {
          const { code, comments, total } = res;
          if (code === 200) {
            state.commentList = state.commentList.concat(comments);
            state.totalNum = total;
            state.pageNum++;
          }
          state.canLoad = true;
        })
        .finally(() => {
          load.clear();
        });
    };
    // 上拉加载
    const loading = () => {
      if (state.commentList.length >= state.totalNum) return;
      getMusicComment(props.songId || 0);
    };
    // 格式化事件
    const formatTime = computed(
      () => (time: number) => dayjs(time).format("YYYY年MM月DD日")
    );
    getMusicComment(props.songId)
    watch(()=>props.songId,(newVal,oldVal)=>{
       if(newVal!==oldVal){
          state.totalNum = 9999999;
          state.pageNum = 0;
          state.commentList = [];
          state.canLoad = true;
       }
    })
    return {
      ...toRefs(state),
      getMusicComment,
      loading,
      formatTime,
    };
  },
});
</script>

<style lang='scss' scoped>
.comment-wrapper {
  padding: 10px 0;
  height: 100%;
  box-sizing: border-box;
  .comment-wrapper-title {
    height: 35px;
    padding: 0 10px;
  }
  .comment-wrapper-content {
    height: calc(100% - 35px);
    color: #707070;
    .comment-wrapper-content-item {
      margin: 0 10px 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      .comment-wrapper-content-item-left {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 10px;
        background: #eee;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .comment-wrapper-content-item-right {
        flex: 1;
        font-size: 10px;
        .comment-right-top {
          width: 100%;
          color: #999;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .comment-right-text {
          margin-top: 5px;
          font-size: 12px;
          width: 100%;
          text-align: justify;
          text-align-last: left;
          word-break: break-all;
          word-wrap: break-word;
        }
      }
    }
  }
}
</style>